<template lang="pug">
  .clearfix
    Modal(
      width="800"
      v-model="isEditDetailModal"
      :title="id ? '编辑数据权限组' : '新增数据权限组' "
      class-name="vertical-center-modal"
      @on-ok="ok"
      @on-cancel="cancel"
    )
      Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="146")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable style="width: 300px")
          template(v-if="item.type === 'tree'")
            Tree.h200.overflow-y-scroll(:data="permissionList" ref="tree" show-checkbox check-directly @on-check-change="treeCheckChange" @getCheckedNodes="getCheckedNodes")
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
</template>

<script>
import { SysDataPermissionApi } from '@/api/SysDataPermission.api.js'
import { SysDataPermissionGroupApi } from '@/api/SysDataPermissionGroup.api.js'
import { constants } from 'fs';
export default {
  name: '',

  props: {
  },

  data () {
    return {
      isEditDetailModal: false,
      id: '',
      loading: false,
      PageIndex: 1,
      PageSize: 10,
      codeTotal: 0,
      listData: [],
      permissionList:[],
      menuName: '',
      customerName: '',
      accountName: '',
      permissionIdList: '',
      formData: {
        name: '',
        permissionIdList: '',
        enabled: true
      },
      formItem: [
        { type: 'input', label: '数据权限组名称：', placeholder: '请输入数据权限组名称', prop: 'name', model: 'name', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'switch', label: '启用：', placeholder: '请选择是否启用', prop: 'enabled', model: 'enabled', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'tree', label: '数据权限：', placeholder: '请选择数据权限', prop: 'permissionIdList', model: 'permissionIdList', style: 'ivu-col-span-24' }
      ],
      rules: {
        name: [
          { required: true, message: '请填写数据权限组名称' }
        ],
        permissionIdList: [
          { required: true, message: '请勾选数据权限组名称' }
        ],
        enabled: [
          { required: true, message: '请选择是否启用' }
        ]
      }
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    getCheckedNodes (val) {
      console.log(val)
    },

    ok () {
      console.log(this.formData)
      let treeCheckList = this.treeCheckList
      let permissionIdList = []
      
      console.log(this.treeCheckList)
      console.log(typeof(this.treeCheckList) == 'undefined','typeof')
      console.log(this.permissionIdList)
      if (typeof(this.treeCheckList) == 'undefined') {
        permissionIdList = this.permissionIdList
      } else {
        for (var i in this.treeCheckList) {
          permissionIdList[i] = this.treeCheckList[i].id
        }
      }
      this.formData.permissionIdList = permissionIdList
      SysDataPermissionGroupApi.save(this.formData).then(res => {
        console.log(res,'save')
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$parent.getList()
        } else {
          this.$Message.error({
              content: res.data.message,
              duration: 10,
              closable: true
          })
        }
      })
    },

    cancel () {
    },
    
    getModel() {
      if (this.id) {
        console.log('GetModel')
        SysDataPermissionGroupApi.getModel({'parameter.id':this.id}).then(res => {
          console.log(res,'getPermissionGroup')
          if (res.data.success) {
            this.formData.name = res.data.data.detail.name
            this.formData.id = this.id
            this.permissionList = res.data.data.permissionList
            this.permissionIdList = res.data.data.detail.permissionIdList
            this.formData.enabled = res.data.data.detail.enabled
            this.getCheckedNodes()
          } else {
            this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
            })
          }
        })
      } else {
        this.formData.id = null
        SysDataPermissionApi.getBatchSetPermission({}).then(res => {
          console.log(res,'getPermissionGroup')
          if (res.data.success) {
            this.permissionList = res.data.data.permissionList
          } else {
            this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
            })
          }
        })
      }
      
    },

    handleChange (newTargetKeys, direction, moveKeys) {
      this.targetKeys = newTargetKeys
      console.log(this.targetKeys)
    },

    treeCheckChange (value) {
      console.log('被勾选的节点有this.selectNode: ', value)
      this.treeCheckList = value
    }
  }
}
</script>

<style lang="less" scope>
  .ivu-row {
    display: flex;
    flex-direction: column;
  }
</style>
